<template>
  <div class="nearby">
    <h3 class="nearby__title">附近店铺</h3>
    <ul class="nearby__list">
      <router-link
        :to="`/shop/${item._id}`"
        v-for="item in NearbyList"
        :key="item._id"
      >
        <ShopInfo :item="item" />
      </router-link>
    </ul>
  </div>
</template>
<script>
import { get } from "../../utils/request";
import { ref } from "vue";
import ShopInfo from "../../components/shopInfo/ShopInfo.vue";
const useNearbyListEffer = () => {
  const NearbyList = ref([]);
  // const getNearbyList = async () => {
  //   const result = await get("api/shop/hot-list");
  //   if (result?.data?.errno === 0) {
  //     NearbyList.value = result.data.data;
  //   }
  // };
  const getNearbyList = () => {
    get("api/shop/hot-list").then((response) => {
      if (response?.data?.errno === 0) {
        NearbyList.value = response.data.data;
      }
    });
  };
  return { NearbyList, getNearbyList };
};

export default {
  name: "NearbyPage",
  components: { ShopInfo },
  setup() {
    const { NearbyList, getNearbyList } = useNearbyListEffer();
    getNearbyList();
    return { NearbyList };
  },
};
</script>
<style lang="scss" scoped>
@import "../../style/viriables.scss";
.nearby {
  &__title {
    margin: 0.16rem 0 0 0;
    font-size: 0.18rem;
    color: $content-fontcolor;
    // font-weight: normal;
    padding-bottom: 0.02rem;
  }
  &__list {
    margin: 0;
    padding: 0;
    a {
      text-decoration: none;
    }
  }
}
</style>